<template>
    <el-row :gutter="5" class="card-row">
        <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="4" v-for="(v, k) in data" :key="k" class="card-col">
            <el-card shadow="hover" @click="handleClick(k)">
                <ProcessCard />
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import { defineComponent, onMounted, reactive } from 'vue'
    import ProcessCard from '@/components/process-card/index.vue'
    import { useRouter } from 'vue-router'
    export default defineComponent({
        components: {
            ProcessCard,
        },
        setup() {
            let data = reactive([])
            const router = useRouter()

            function handleClick(k) {
                router.push({ path: 'edit-card', params: { cardId: k } })
            }

            onMounted(() => {
                for (let i = 0; i < 12; i++) {
                    data.push(i)
                }
            })

            return {
                data,
                handleClick,
            }
        },
    })
</script>

<style lang="less" scoped>
    .card-row {
        .card-col {
            margin-bottom: 5px;
        }
    }
</style>
